<template>
    <el-table
      :data="tableData"
      style="width: 100%"
      ref="table"
      :row-key="getRowKeys"
      :expand-row-keys="expands"
      @expand-change="expndChange"
    >
      <el-table-column type="expand">
        <el-collapse v-model="activeNames">
          <el-collapse-item title="更多" name="1">
            我是详情信息
          </el-collapse-item>
        </el-collapse>
      </el-table-column>
      <el-table-column label="采集器接收时间" prop="time" width="200">
      </el-table-column>
      <el-table-column label="事件名称" prop="eventname" width="240">
      </el-table-column>
      <el-table-column label="来源IP" prop="sourceip"> </el-table-column>
      <el-table-column label="目的IP" prop="targetip"> </el-table-column>
      <el-table-column label="目的端口" prop="port"> </el-table-column>
      <el-table-column label="传输协议" prop="transmissionhttp">
      </el-table-column>
      <el-table-column label="应用协议" prop="http"> </el-table-column>
      <el-table-column label="设备类型" prop="equipmenttype"> </el-table-column>
      <el-table-column label="设备名称" prop="equipmentname"> </el-table-column>
    </el-table>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeNames: [],
        expands: [],
        tableData: [
          {
            time: '2023-02-17 13:17:21',
            eventname: 'MyKings Botnet C&C活动事件',
            sourceip: '112.253.2.188',
            targetip: '63.251.126.11',
            port: '80',
            transmissionhttp: 'http',
            http: 'http',
            equipmenttype: '入侵检测系统',
            equipmentname: '联通数据中台',
            id: '1'
          },
          {
            time: '2023-02-17 13:17:21',
            eventname: 'MyKings Botnet C&C活动事件',
            sourceip: '112.253.2.188',
            targetip: '63.251.126.11',
            port: '80',
            transmissionhttp: 'http',
            http: 'http',
            equipmenttype: '入侵检测系统',
            equipmentname: '联通数据中台',
            id: '2'
          },
          {
            time: '2023-02-17 13:17:21',
            eventname: 'MyKings Botnet C&C活动事件',
            sourceip: '112.253.2.188',
            targetip: '63.251.126.11',
            port: '80',
            transmissionhttp: 'http',
            http: 'http',
            equipmenttype: '入侵检测系统',
            equipmentname: '联通数据中台',
            id: '3'
          },
          {
            time: '2023-02-17 13:17:21',
            eventname: 'MyKings Botnet C&C活动事件',
            sourceip: '112.253.2.188',
            targetip: '63.251.126.11',
            port: '80',
            transmissionhttp: 'http',
            http: 'http',
            equipmenttype: '入侵检测系统',
            equipmentname: '联通数据中台',
            id: '4'
          }
        ]
      }
    },
    methods: {
      //实现只有一个展开折叠
      expndChange(row, expandedRows) {
        if (expandedRows.length) {
          this.expands = []
          if (row) {
            this.expands.push(row.id) // 每次push进去的是每行的ID
          }
        } else {
          this.expands = [] // 默认不展开
        }
      },
      getRowKeys(row) {
        return row.id
      }
    }
  }
  </script>